<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/index.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../js/baiduTemplate.js"></script>
</head>
<body>
<div id="headerbg">
    <div id="header">
        <div id="logotitle">
            <span id="headertitle">图书管理系统</span>
        </div>
        <div id="userDiv">
            <div id="userImg"><img></div>
            <div id="useName"></div>
            <button id="userInfo">修改信息</button>
            <button id="Logging_out">注销</button>
        </div>
    </div>
    <div>

    </div>
    <div id="userbg">
        <div id="user">
            <div id="userheader">用户修改：</div>
            <span>用户名</span><input type="text" id="use"></br>
            <span>头像地址</span><input type="text" id="userImgAddress"></br>
            <span>密码</span><input type="password" id="pwd"></br>
            <div id="twopwd">请在输入一次密码</div>
            <span>确认密码</span><input type="password" id="surepwd"></br>
            <button id="rightalter">确认修改</button>
            <button id="noalter">取消修改</button>
        </div>
    </div>
</div>
    <div id="btnDiv">
        <button id="add">添加</button>
        <button id="refresh">刷新</button>
    </div>
    <table id="tab">
        <thead>
        <td id="imgTd">图片</td>
        <td id="bookNameTd">图书名称</td>
        <td id="authorTd">作者</td>
        <td id="priceTd">价格</td>
        <td id="addressTd">出版地址</td>
        <td id="dataTd">出版日期</td>
        <td id="addnumTd">出版编号</td>
        <td id="handler">操作</td>
        </thead>
        <tbody id="tby">

        </tbody>
    </table>
    <div id="bgdiv">
        <div id="addinfo">
            <div id="addLeft">
                <div>
                    <span>图书名称</span>
                    <input type="text" id="booknameInp">
                </div>
                <div>
                    <span>作者</span>
                    <input type="text" id="authorInp">
                </div>
                <div>
                    <span>价格</span>
                    <input type="text" id="priceInp">
                </div>
                <div>
                    <span>会员价</span>
                    <input type="text" id="vipPriceInp">
                </div>
                <div>
                    <span>学生价</span>
                    <input type="text" id="stuPriceInp">
                </div>
                <div>
                    <span>数量</span>
                    <input type="text" id="numberInp">
                </div>
            </div>
            <div id="addRight">
                <div>
                    <span>页数</span>
                    <input type="text" id="pageInp">
                </div>
                <div>
                    <span>开数</span>
                    <input type="text" id="normsInp">
                </div>
                <div>
                    <span>出版社地址</span>
                    <input type="text" id="addressInp">
                </div>
                <div>
                    <span>图片地址</span>
                    <input type="text" id="bookImgInp">
                </div>
                <div>
                    <span>出版日期</span>
                    <input type="text" id="dataInp">
                </div>
                <div>
                    <span>出版编号</span>
                    <input type="text" id="addnumInp">
                </div>
                <span id="spanBtn">
                    <button id="addBtnInp">添加</button>
                    <button id="offBtnInp">取消</button>
                    <button id="alterBtnInp">修改</button>

                </span>
            </div>
        </div>
    </div>
</body>
<script src="../js/bookcollation.js" type="text/javascript"></script>
<script type="text/javascript">
//    执行用户信息的函数
    getuser();
//    从服务器上获取用户信息的函数
    function getuser() {
        $.ajax({
            type:"get",
            url:"http://localhost:6500/bookuse"+"/"+localStorage.dataId,
            success:function (data) {
                console.log(data);
                $("#useName").html(data.username);
              $("#userDiv img").attr("src",data.idImg);
            }
        })
    }

//    创建点击函数当点击修改信息的时候修改界面显示出来
    $("#userInfo").on("click",function () {
        $("#userbg").css("display","block");
        $("#twopwd").html("请重新输入您修改的密码");

    });

//      创建点击确定修改的按钮时执行的函数
    $("#rightalter").on("click",function () {
        if($("#pwd").val() || $("#surepwd").val() || $("#use").val() ){
            if($("#pwd").val()==$("#surepwd").val()){
                $("#twopwd").html("两次输入密码相同");
                var userobj={
                    id: localStorage.dataId,
                    username:$("#use").val(),
                    password:$("#pwd").val(),
                    idImg:$("userImgAddress").val()
                };
                console.log(userobj);
//            判断两次相同时执行ajax修改的api 请求
                var putUrl="http://localhost:6500/bookuse" + "/" + localStorage.dataId;
                $.ajax({
                    url: putUrl,
                    type:"put",
                    data: userobj,
                    success: function () {
                        $("#userbg").css("display","none");
                        getuser();
                    }
                })
            }else {
                $("#twopwd").html("两次输入密码不想同请重新输入");
                return;
            }
        }else {
            alert("请输入内容后添加");
            return

        }


    });

//     创建点击取消修改按钮时执行的函数
    $("#noalter").on("click",function (){
        $("#userbg").css("display","none");
    });

//    创建点击注销时执行的函数
    $("#Logging_out").on("click",function () {
        $.ajax({
            type:"POST",
            url:"http://localhost:6500/bookuse/logout",
            success:function () {
                window.open("username.html")
            }
        })
    })



    var trs=$("<tr></tr>");

</script>
</html>